<template>
  <n-spin :show="loading">
    <div>
      <div class="n-layout-page-header">
        <n-card title="工作台" :bordered="false">
          <n-grid cols="2 s:1 m:1 l:2 xl:2 2xl:2" responsive="screen">
            <n-gi>
              <div class="flex items-center">
                <div>
                  <n-avatar circle :size="64" :src="schoolboy"></n-avatar>
                </div>
                <div>
                  <p class="px-4 text-xl">早安，打工人，开始您一天的工作吧！</p>
                  <p class="px-4 text-gray-400">今日阴转大雨，15℃ - 25℃，出门记得带伞哦。</p>
                </div>
              </div>
            </n-gi>
            <n-gi>
              <div class="flex justify-end w-full">
                <div class="flex flex-1 flex-col justify-center text-right">
                  <span class="text-secondary">项目数</span>
                  <span class="text-2xl">16</span>
                </div>
                <div class="flex flex-1 flex-col text-right">
                  <span class="text-secondary">待办</span>
                  <span class="text-2xl">3/15</span>
                </div>
                <div class="flex flex-1 flex-col text-right">
                  <span class="text-secondary">消息</span>
                  <span class="text-2xl">35</span>
                </div>
              </div>
            </n-gi>
          </n-grid>
        </n-card>
      </div>
      <n-grid class="mt-4" cols="s:1 m:1 l:2 xl:2 2xl:2" responsive="screen" :x-gap="12" :y-gap="9">
        <n-gi>
          <n-card
            title="项目"
            size="small"
            :bordered="false"
            content-style="padding: 0;"
            :segmented="{ content: 'hard' }"
          >
            <div class="flex flex-wrap">
              <n-card
                size="small"
                hoverable
                class="cursor-pointer ms:w-1/2 md:w-1/3"
                v-for="item in projects"
                :key="item.title"
              >
                <div class="flex">
                  <span>
                    <n-icon size="30" :color="item.color">
                      <!-- n-icon图标动态显示 -->
                      <component :is="item.icon" />
                    </n-icon>
                  </span>
                  <span class="text-lg ml-4">{{ item.title }}</span>
                </div>
                <div class="mt-2 h-10 text-gray-400">{{ item.subTitle }}</div>
                <div class="mt-2 h-10 text-gray-400">{{ item.desc }}</div>
              </n-card>
            </div>
          </n-card>
          <n-card
            title="动态"
            :segmented="{ content: 'hard' }"
            content-style="padding-top: 0;padding-bottom: 0"
            :bordered="false"
            size="small"
            class="mt-4"
          >
            <template #header-extra>
              <a href="javascript:;">更多</a>
            </template>
            <n-list>
              <n-list-item v-for="(item, index) in dynamicItems" :key="index">
                <template #prefix>
                  <n-avatar circle :size="40" :src="schoolboy"></n-avatar>
                </template>
                <n-thing :title="item.title">
                  <template #description>
                    <p class="text-xs text-gray-500">{{ item.time }}</p>
                  </template>
                </n-thing>
              </n-list-item>
            </n-list>
          </n-card>
        </n-gi>
        <n-gi>
          <n-card
            title="快捷操作"
            :segmented="{ content: 'hard' }"
            content-style="padding: 0"
            :bordered="false"
            size="small"
          >
            <div class="flex flex-wrap">
              <n-card
                size="small"
                hoverable
                v-for="(item, index) in fasterItems"
                :key="index"
                class="ms:w-1/2 md:w-1/3 cursor-pointer"
              >
                <div class="flex flex-col text-gray-500">
                  <span class="text-center">
                    <n-icon size="30" :color="item.color">
                      <!-- n-icon图标动态显示 -->
                      <component :is="item.icon" />
                    </n-icon>
                  </span>
                  <span class="text-lx text-center">{{ item.title }}</span>
                </div>
              </n-card>
            </div>
          </n-card>
          <n-card :segmented="{ content: 'hard' }" :bordered="false" size="small" class="mt-4">
            <img src="~@/assets/image/Business.svg" class="w-full" />
          </n-card>
        </n-gi>
      </n-grid>
    </div>
  </n-spin>
</template>
<script lang="ts">
import schoolboy from '@/assets/image/schoolboy.png';
import { onMounted, ref, defineComponent, reactive, toRefs } from 'vue';
import { constantWorkplaceIcon } from './workplace-icons';
import { getProjects, getDynamicItems } from '@/api/dashboard';
import {
  DashboardOutlined,
  ProfileOutlined,
  FileProtectOutlined,
  SettingOutlined,
  ApartmentOutlined
} from '@vicons/antd';

interface projectItem {
  title: string;
  subTitle: string;
  desc: string;
  color: string;
  icon: any;
}

interface dynamicItem {
  title: string;
  time: string;
}

interface fasterItem {
  title: string;
  icon: any;
  color: string;
}

export default defineComponent({
  name: 'WorkPlace',
  components: {
    DashboardOutlined,
    ProfileOutlined,
    FileProtectOutlined,
    SettingOutlined,
    ApartmentOutlined
  },
  setup() {
    // 定义项目（typeScript） ts定义数组的方式一
    const projects = ref<projectItem[]>([]);
    const loading = ref(false);

    const fasterItems: fasterItem[] = [
      {
        title: '主控台',
        icon: DashboardOutlined,
        color: '#68c755'
      },
      {
        title: '列表',
        icon: ProfileOutlined,
        color: '#fab251'
      },
      {
        title: '表单',
        icon: FileProtectOutlined,
        color: '#1890ff'
      },
      {
        title: '权限管理',
        icon: ApartmentOutlined,
        color: '#f06b96'
      },
      {
        title: '系统管理',
        icon: SettingOutlined,
        color: '#7238d1'
      }
    ];

    const state = reactive({
      // ts定义数组的方式二
      dynamicItems: [] as dynamicItem[]
    });

    /**
     * @description: 通过接口获取数据
     */
    const fetchProject = async () => {
      const result = await getProjects();
      // loading.value = false;

      result.forEach((item: projectItem) => {
        // 将后台返回的图标string转换为组件
        item.icon = constantWorkplaceIcon[item.icon] || null;
      });
      projects.value = result;
    };

    /**
     * @description: 获取动态
     */
    const fetchItem = async () => {
      const result = await getDynamicItems();
      state.dynamicItems = result;
    };

    onMounted(async () => {
      loading.value = true;
      await fetchProject();
      await fetchItem();

      loading.value = false;
    });
    return {
      ...toRefs(state),
      schoolboy,
      projects,
      loading,
      fasterItems
    };
  }
});
</script>
<style lang="less" scoped></style>
